import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import AudioDance2 from '..';
import styles from './index.module.less';

const Demo = (props) => {
  const { className } = props;

  const audioDanceRef = useRef(null);

  useEffect(() => {
    setInterval(() => {
      if (audioDanceRef.current) {
        const arr = [];
        for (let i = 0; i < 128; i += 1) {
          arr[i] = Math.random() * 256;
        }
        audioDanceRef.current.drawArray(arr);
      }
    }, 100);
  }, []);

  return (
    <div className={classnames(styles.root, className)}>
      <AudioDance2 ref={audioDanceRef} />
    </div>
  );
};

Demo.defaultProps = {
  className: null,
};

Demo.propTypes = {
  className: PropTypes.any,
};

export default Demo;
